<div class="row-fluid sortable ui-sortable">
	<div id="chart-pertambahan-pengurangan" class="box span12">
		<div class="box-header well" data-original-title>
			<h2 id="action-title">Grafik Pertambahan dan Pengurangan Sapi</h2>
			<div class="box-icon">
				<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
			</div>
		</div>
		<div class="box-content">
			<div id="chart-pp" style="height:300px" class="span11">
			</div>
		</div>
	</div>
</div>
<?php
	//var_dump($pertambahan_pengurangan->result_array());
	$pertambahan 	= array();
	$pengurangan 	= array();
	$keluar 		= array(); 
	$masuk 			= array(); 
	if($pertambahan_pengurangan){
		foreach($pertambahan_pengurangan->result_array() as $data){
			$bulan = explode("-",$data["TANGGAL_KEJADIAN"]);
			if($data["JENIS_ALASAN"]=="1"){
				$pertambahan[$bulan[0]."-".$bulan[1]][$data["ID_KOTA"]] = $data["J"];
			} else {
				$pengurangan[$bulan[0]."-".$bulan[1]][$data["ID_KOTA"]] = $data["J"]*(-1);
			}
		}
	}
	
	foreach($dist_masuk->result_array() as $key => $data){
		$bulan = explode("-",$data["TANGGAL_KEJADIAN"]);
		$masuk[$bulan[0]."-".$bulan[1]][$data["ID_KOTA"]] = $data["J"];
	}
	
	foreach($dist_keluar->result_array() as $key => $data){
		$bulan = explode("-",$data["TANGGAL_KEJADIAN"]);
		$keluar[$bulan[0]."-".$bulan[1]][$data["ID_KOTA"]] = $data["J"];
	}
	
	$min 	= array();
	$plus 	= array();
	$max	= array();
	foreach($pertambahan as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
				$plus[$tanggal][$id_kota] = $jumlah;
				$max[] = $jumlah;
		}
	}
	foreach($masuk as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
			if(!isset($plus[$tanggal][$id_kota])){
				$plus[$tanggal][$id_kota] = $jumlah;
				$max[] = $jumlah;
			} else {
				$plus[$tanggal][$id_kota] += $jumlah;
				$max[] = $jumlah;
			}
		}
	}
	
	foreach($pengurangan as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
				$min[$tanggal][$id_kota] = $jumlah;
				$max[] = $jumlah;
		}
	}
	foreach($keluar as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
			if(!isset($min[$tanggal][$id_kota])){
				$min[$tanggal][$id_kota] = $jumlah;
			} else {
				$min[$tanggal][$id_kota] += $jumlah;
				$max[] = $jumlah;
			}
		}
	}
	ksort($plus);
	ksort($min);
	/*echo "<br>==========all pertambahan===========</br>";
	foreach($plus as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
			echo $tanggal."-".$id_kota." : ".$jumlah."<br>";
		}
	}
	
	echo "<br>==========pengurangan===========</br>";
	foreach($pengurangan as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
			echo $tanggal."-".$id_kota." : ".$jumlah."<br>";
		}
	}
	
	echo "<br>==========keluar===========</br>";
	foreach($keluar as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
			echo $tanggal."-".$id_kota." : ".$jumlah."<br>";
		}
	}
	
	echo "<br>==========all pengurangan===========</br>";
	foreach($min as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
			echo $tanggal."-".$id_kota." : ".$jumlah."<br>";
		}
	}
	
	
	
	echo "<br>==========pertambahan===========</br>";
	foreach($pertambahan as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
			echo $tanggal."-".$id_kota." : ".$jumlah."<br>";
		}
	}
	
	echo "<br>==========masuk===========</br>";
	foreach($masuk as $tanggal => $data){
		foreach($data as $id_kota => $jumlah){
			echo $tanggal."-".$id_kota." : ".$jumlah."<br>";
		}
	}
	
	*/
?>
<script>
	/* Chart Pertambahan Pengurangan */
	function drawChartPP(){
		if($("#chart-pp").length)
		{
			var pertambahan = [], pengurangan = [], jumlah = [];
			<?php
				if($pertambahan_pengurangan){
				//print_r($pertambahan_pengurangan->result_array());
				
					foreach($plus as $tanggal => $data){
						echo "
							var myDate = '".$tanggal."';
							myDate = myDate.split('-');
							var newDate = myDate[1]+'/'+1+'/'+myDate[0];
							nd = new Date(newDate).getTime();
						";
						$j = 0;
						foreach($data as $id_kota => $jumlah){
							$j+=$jumlah;
						}
						echo "pertambahan.push([nd,".$j."]);";
					}
					
					foreach($min as $tanggal => $data){
						echo "
							var myDate = '".$tanggal."';
							myDate = myDate.split('-');
							var newDate = myDate[1]+'/'+1+'/'+myDate[0];
							nd = new Date(newDate).getTime();
						";
						$j = 0;
						foreach($data as $id_kota => $jumlah){
							$j+=$jumlah;
						}
						echo "pengurangan.push([nd,".$j."]);";
					}
				}
			?>
			var plot = $.plot($("#chart-pp"),
					[ { data: pertambahan, label: "pertambahan"}, { data: pengurangan, label: "pengurangan" } ], {
					   series: {
						   lines: { show: true  },
						   points: { show: true }
					   },
					   grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
					   //yaxis: { min: 0, max: <?php echo $max_pp["J"]; ?>+1 },
					   xaxis:  {
									mode: "time", 
									timeformat: "%b/%y", 
									minTickSize: [1, "month"],
									monthNames: ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"]
								},
					   colors: ["#539F2E", "#3C67A5"]
					 });
					 
					 

			function showTooltip(x, y, contents) {
				$('<div id="tooltip">' + contents + '</div>').css( {
					position: 'absolute',
					display: 'none',
					top: y + 5,
					left: x + 5,
					border: '1px solid #fdd',
					padding: '2px',
					'background-color': '#dfeffc',
					opacity: 0.80
				}).appendTo("body").fadeIn(200);
			}

			var previousPoint = null;
			$("#chart-pp").bind("plothover", function (event, pos, item) {
				$("#x").text(pos.x.toFixed(2));
				$("#y").text(pos.y.toFixed(2));

					if (item) {
						if (previousPoint != item.dataIndex) {
							previousPoint = item.dataIndex;

							$("#tooltip").remove();
							var x = item.datapoint[0].toFixed(2),
								y = item.datapoint[1].toFixed(2),
								date = new Date(x/1000*1000),
								day = date.getDate(),
								month = date.getMonth()+1,
								year = date.getFullYear();
								//item.series.label
							showTooltip(item.pageX, item.pageY,
										"&nbsp;&nbsp;&nbsp;"+month+"/"+year+" = "+y);
						}
					}
					else {
						$("#tooltip").remove();
						previousPoint = null;
					}
			});

			$("#chart-pp").bind("plotclick", function (event, pos, item) {
				if (item) {
					$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
					plot.highlight(item.series, item.datapoint);
				}
			});
		}
	}
	/* End Chart Pertambahan Pengurangan */
</script>